<template>
    <div>
        <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <strong>MUWA 项目管理</strong>
                </a>
            </div>
            
            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <button class="button is-danger" @click="logout">退出登录</button>
                    </div>
                </div>
            </div>
        </nav>
        
        <div class="container mt-5">
            <h1 class="title is-2 mb-6">项目列表</h1>
            
            <div class="mb-6">
                <div class="field is-grouped">
                    <div class="control is-expanded">
                        <input type="text" class="input" v-model="newProjectName" placeholder="输入新项目名称">
                    </div>
                    <div class="control">
                        <button class="button is-success" @click="addProject">添加项目</button>
                    </div>
                </div>
            </div>
            
            <div class="box" v-if="projects.length > 0">
                <table class="table is-fullwidth">
                    <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(project, index) in projects" :key="index">
                            <td>{{ project.name }}</td>
                            <td>
                                <button class="button is-danger is-small" @click="deleteProject(index)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="notification is-info" v-else>
                暂无项目，请添加新项目
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: 'Main',
    setup() {
        const projects = ref([
            { name: '项目1' },
            { name: '项目2' }
        ]);
        
        const newProjectName = ref('');
        
        const addProject = () => {
            if (newProjectName.value.trim()) {
                projects.value.push({ name: newProjectName.value.trim() });
                newProjectName.value = '';
            } else {
                alert('项目名称不能为空');
            }
        };
        
        const deleteProject = (index) => {
            if (confirm('确定要删除这个项目吗？')) {
                projects.value.splice(index, 1);
            }
        };
        
        const logout = () => {
            window.location.hash = '#/';
        };
        
        return {
            projects,
            newProjectName,
            addProject,
            deleteProject,
            logout
        };
    }
});
</script>